<template>
  <div class="example content-wrapper">
    <div class="field has-addons has-addons-centered">
      <p class="control">
        <span class="select">
          <select v-model="selected">
            <option>选择</option>
            <option>姓名</option>
            <option>手机</option>
          </select>
        </span>
      </p>
      <p class="control">
        <input class="input" type="text" placeholder="筛选条件" v-model="searchText">
      </p>
      <p class="control">
        <a class="button is-primary" @click="searchClick">
          搜索
        </a>
      </p>
      <router-link class="nav-item is-primary" :to="{name: 'Consumer'}">
        <span class="icon">
          <i class="fa fa-plus" aria-hidden="true"></i>
        </span>新增
      </router-link>
    </div>
    <table>
      <thead>
        <tr>
          <th v-for = "item in titles">{{item}}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(content, index) in contents" v-show="contents.length > 0">
          <td :data-label="titles[key]" v-for="(item, key) in content">
            {{item}}
          </td>
        </tr>
      </tbody>
    </table>
    <div class="noneWrapper" v-show="contents.length === 0">
      暂无查询资料
    </div>
    <div class="pagination-wrapper" v-show="showPagination">
      <el-pagination small
        layout="prev, pager, next"
        :total="total" @current-change="currentChange" @size-change="sizeChange" :page-size='15'>
      </el-pagination>
    </div>
  </div>
 
</template>
<script>
import { Cell } from 'mint-ui';
import { Pagination, Message } from 'element-ui';

export default {
  data() {
    return {
      showPagination: true,
      titles: { id: '编号', name: '姓名', mobile: '手机', birthday: '生日', left: '左', right: '右' },
      contents: [],
      searchText: '',
      selected: '选择',
      total: 0,
    }
  },
  created() {
    this.$http.post(this.$url.QUERYINFOS, {
      mobile: '15100002222',
      page: 1,
      pagesize: 15,
    }).then((response) => {
      if (response.data.rtnCode === '000') {
        this.contents = response.data.results.infos;
        this.total = response.data.results.total;
      } else {
        this.contents = [];
        this.total = 0;
        Message({
          message: response.data.rtnMsg,
          type: 'warning',
          duration: 2000,
        });
      }
    }).catch((error) => {
      Message({
        message: '查询失败，请检查网络',
        type: 'error',
        duration: 2000,
      });
    })
  },
  components: {
    'mt-cell': Cell,
    'el-pagination': Pagination,
  },
  methods: {
    sizeChange() {
    },
    currentChange(currentPage) {
      this.$http.post(this.$url.QUERYINFOS, {
        page: currentPage,
        pagesize: 15,
      }).then((response) => {
        if (response.data.rtnCode === '000') {
          this.contents = response.data.results.infos;
          this.total = response.data.results.total;
        } else {
          this.contents = [];
          this.total = 0;
          Message({
            message: response.data.rtnMsg,
            type: 'warning',
            duration: 2000,
          });
        }
      }).catch((error) => {
        Message({
          message: '查询失败，请检查网络',
          type: 'error',
          duration: 2000,
        });
      })
    },
    searchClick() {
      if (this.searchText !== '' && this.selected === '选择') {
        Message({
          message: '请先选择筛选条件',
          type: 'warning',
          duration: 2000,
        });
        return;
      }
      this.$http.post(this.$url.SEARCHCONSUMER, {
        search: this.searchText,
        selected: this.selected,
      }).then((response) => {
        if (response.data.rtnCode === '000') {
          this.showPagination = response.data.showPagination;
          this.contents = response.data.contents;
        } else {
          this.contents = [];
          this.total = 0;
          Message({
            message: response.data.rtnMsg,
            type: 'warning',
            duration: 2000,
          });
        }
      }).catch((err) => {
        this.contents = [];
        Message({
          message: '查询失败，请检查网络',
          type: 'error',
          duration: 2000,
        });
      })
    },
  },
};
</script>

<style lang="scss">
@import '../scss/base.scss';
  .content-wrapper {
    @include px2rem(margin-top, 50);
    .addWrapper {
      display: inline-block;
    }
    .noneWrapper {
      @include px2rem(margin-top, 50);
    }
    .pagination-wrapper {
      @include px2rem(margin-top, 50);
    }
    table {
      border: 1px solid #ccc;
      width: 80%;
      margin:0;
      padding:0;
      border-collapse: collapse;
      border-spacing: 0;
      margin: 0 auto;
    }

    table tr {
      border: 1px solid #ddd;
      @include px2rem(padding, 5);
    }

    table th, table td {
      @include px2rem(padding, 10);
      text-align: center;
    }

    table th {
      text-transform: uppercase;
      @include px2rem(font-size, 14);
      letter-spacing: 1px;
    }
    @media screen and (max-width: 600px) {

    table {
      border: 0;
    }

    table thead {
      display: none;
    }

    table tr {
      @include px2rem(margin-bottom, 10);
      display: block;
      border-bottom: 2px solid #ddd;
    }

    table td {
      display: block;
      text-align: right;
      @include px2rem(font-size, 13);
      border-bottom: 1px dotted #ccc;
    }

    table td:last-child {
      border-bottom: 0;
    }

    table td:before {
      content: attr(data-label);
      float: left;
      text-transform: uppercase;
      font-weight: bold;
    }
  }
  }
</style>
